<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <ul id="example-1">
        <li v-for="item in items">
          {{ item.message }}
        </li>
    </ul>


    <!-- 利用数组中地多个属性，数组项属性自带index -->
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>

    <!-- 一个vue只能渲染一个id元素，就不重复渲染了 -->
    <ul id="example-2">
        <!-- 此处可用in可用of      ↓ -->
        <li v-for="(item, index) of items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>

    <!-- 既可遍历数组，亦可遍历对象 -->
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>

    <!-- 如果取值的话，第一个是值，第二个是属性名，第三个是索引 -->
    <div id="v-for-index">
        <!-- v-xx不应当在root元素中使用，即类似于id="app"中的元素使用 -->
        <div v-for="(value, name, index) in object">
            {{ index }}. {{ name }}: {{ value }}
        </div>
    </div>

    <script src="vue.js"></script>
</body>
</html>